var before2 = document.getElementsByClassName("before2")[0];
var after2 = document.getElementsByClassName("after2")[0];

function bannerTu2(domBanner, options) {
    var imgDiv = document.createElement("div");
    var jiaobiaoDiv = document.createElement("div");
    before2.addEventListener("click", function() {
        clearInterval(Change);
        Change = null
        if (jiaoBiaoIndex === 0) {
            jiaoBiaoIndex = options.length / 2 - 1;
        } else {
            jiaoBiaoIndex--;
        }


        jiaoBiaoColor()
    })
    after2.addEventListener("click", function() {
        clearInterval(Change);
        Change = null
        if (jiaoBiaoIndex === options.length / 2 - 1) {
            jiaoBiaoIndex = 0;
        } else {
            jiaoBiaoIndex++;
        }
        jiaoBiaoColor()
    })
    divBanner2.addEventListener("mouseover", function() {
        clearInterval(Change);
        Change = null
    })
    divBanner2.addEventListener("mouseout", function() {
        autoChange()
    })

    var jiaoBiaoIndex = 0;
    var changeTime = 4000;
    var Change = null;
    var donghua = null;
    domBanner.appendChild(imgDiv);
    domBanner.appendChild(jiaobiaoDiv);
    domBanner.style.overflow = "hidden";
    addImg();
    // addTuBiao();
    jiaoBiaoColor();
    autoChange()
        //添加图片进去
    function addImg() {
        for (let i = 0; i < options.length; i++) {
            var obj = options[i];
            var img = document.createElement("img");
            img.src = obj.srcUrl;
            img.style.width = "50%";
            img.style.height = "100%";
            img.style.marginLeft = "0";

            imgDiv.appendChild(img);
        }
        imgDiv.style.width = "100%";
        imgDiv.style.height = "100%";
        imgDiv.style.display = "flex"

    }
    // 加入焦点图标进去
    // function addTuBiao() {
    //     for (let i = 0; i < options.length / 2; i++) {
    //         var span = document.createElement("span");
    //         jiaobiaoDiv.appendChild(span);
    //         span.style.display = "inline-block";
    //         span.style.width = "12px";
    //         span.style.height = "12px";
    //         span.style.borderRadius = "50%";
    //         span.style.backgroundColor = "#ccc"
    //         span.style.margin = "0px 7px 0"
    //         span.style.cursor = "pointer";
    //         (function(index) {
    //             span.addEventListener("click", function() {
    //                 jiaoBiaoIndex = index;
    //                 jiaoBiaoColor()
    //             })
    //         }(i))
    //         jiaobiaoDiv.style.textAlign = "center"
    //         jiaobiaoDiv.style.transform = "translateY(-25px)"
    //     }
    // }
    //设置状态
    function jiaoBiaoColor() {
        // for (let i = 0; i < options.length / 2; i++) {
        //     if (i === jiaoBiaoIndex) {
        //         jiaobiaoDiv.children[i].style.backgroundColor = "#ff7500"
        //     } else {
        //         jiaobiaoDiv.children[i].style.backgroundColor = "#ccc"
        //     }
        // }
        var start = parseInt(imgDiv.children[0].style.marginLeft);
        var end = jiaoBiaoIndex * -100;
        var zongjuli = end - start;
        var dis = 500;
        var speed = zongjuli / dis;
        if (donghua) {
            clearInterval(donghua)
        }
        donghua = setInterval(function() {

            start += speed * 20;
            imgDiv.children[0].style.marginLeft = start + "%";
            if (Math.abs(end - start) < 1) {
                imgDiv.children[0].style.marginLeft = end + "%";
                clearInterval(donghua)
            }
        }, 20)
    }
    //自动切换
    function autoChange() {
        Change = setInterval(function() {
            if (jiaoBiaoIndex < options.length / 2 - 1) {
                jiaoBiaoIndex++;
            } else {
                jiaoBiaoIndex = 0;
            }
            jiaoBiaoColor()
        }, changeTime);
    }
}